<template>
    <li @click="go">
        <template v-if="!isActive">
            <slot name="icon"></slot>
        </template>
        <template v-else>
            <slot name="icon-on"></slot>
        </template>
        <div :style="{
            color: isActive? activeColor : ''
        }">
            <slot name="text" ></slot>
        </div>
    </li>
</template>
<script>
export default {
    data(){
        return {
            msg:"hello"
        }
    },
    props:{
        path:{
            required:true,
            type:String
        },
        activeColor:{
            type:String,
            default:"#333"
        }
    },
    methods:{
        go(){
            if(this.path){
                this.$router.push(this.path);
                // this.isActive = !this.isActive
            }
        }
    },
    computed:{
        isActive(){
            let bool = this.$route.path.indexOf(this.path)>-1 ? true :false;
            return bool;
        },
        cmpMsg(){
            // 如果计算属性内部使用到了响应式的数据，那么当它依赖的响应式数据变化时
            // 计算属性也会一起变化
            return this.msg.toUpperCase()
        }
    }
}
</script>

<style lang="less">
    footer ul li{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    footer ul li img{
        width: 0.37rem;
        height: 0.4rem;
        margin-bottom: 4px;
    }
    footer ul li p{
        font-size: 0.24rem;
    }
</style>
